<template>
	<view class="page">
		<view class="list-item" v-for="(item,index) in users" :key="index" @click="handleItemClick(item, index)">
			<view class="avatar">
				<text class="round" v-if="!item.read"></text>
				<image :src="item.avatar" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="title">
					<text class="name">{{ item.name }}</text>
					<text class="time">{{ item.time }}</text>
				</view>
				<view class="txt">{{ item.msg }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import swipeAction from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue'
	export default {
		components: {
			// swipeAction
		},
		data() {
			return {
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '确认',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				users: [{
						avatar: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E7%B3%BB%E7%BB%9F%E4%BF%A1%E6%81%AF.png',
						name: '系统信息',
						read: 0,
						time: '2025/1/1',
						msg: ' 恭喜你报名成功，祝你旅途愉快 '
					},
					{
						avatar: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E5%85%83%E4%B8%80%E9%81%93%E9%95%BF.png',
						name: '元一道长',
						read: 0,
						time: '2025/1/3',
						msg: '这个活动超有趣！快来挑战！获取线索！'
					},
					{
						avatar: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E4%BA%92%E5%8A%A8%E4%BF%A1%E6%81%AF.png',
						name: '互动信息',
						read: 0,
						time: '2024/10/1',
						msg: '已有999+人赞过你的心愿贴。'
					},
					{
						avatar: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E5%B9%B3%E5%AE%89%E5%96%9C%E4%B9%90.png',
						name: '平安喜乐',
						read: 1,
						time: '2025/1/4',
						msg: '这个活动还差一人助力，帮帮我吧！'
					},
					{
						avatar: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E9%9A%8F%E7%BC%98.png',
						name: '随缘',
						read: 1,
						time: '2025/1/15',
						msg: '这个活动截止了，你还要来吗？'
					},
					{
						avatar: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E9%9D%99%E8%B0%A7%E4%B9%8B%E5%A4%9C.png',
						name: '静谧之夜',
						read: 1,
						time: '2025/3/1',
						msg: '在吗？'
					},
					{
						avatar: 'http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E9%A3%8E%E5%90%B9%E9%BA%A6%E6%B5%AA.jpg',
						name: '风吹麦浪',
						read: 0,
						time: '2025/3/2',
						msg: '1'
					}
				]
			};
		},
		methods: {
			// 合并点击事件
			handleItemClick(item, index) {
				// 标记为已读
				this.markAsRead(index)
				// 跳转聊天页
				this.connect(item)
			},

			// 标记已读方法
			markAsRead(index) {
				if (this.users[index].read === 0) {
					this.$set(this.users, index, {
						...this.users[index],
						read: 1
					})
				}
			},

			connect(item) {
				// 增加msg参数传递
				uni.navigateTo({
					url: `/pages/message/message?name=${encodeURIComponent(item.name)}&avatar=${encodeURIComponent(item.avatar)}&msg=${encodeURIComponent(item.msg)}`

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}

	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #ccced3;

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;

			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
				}

				.time {
					color: #999;
					font-size: 24rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>